<template>
  <el-table
    :data="planningStore.timeRanges"
    style="width: 100%"
    empty-text="暂无数据"
    stripe
  >
    <el-table-column prop="taskName" label="任务名称" min-width="120">
      <template #default="scope">
        <el-text type="primary">{{ scope.row.taskName }}</el-text>
      </template>
    </el-table-column>
    <el-table-column label="开始时间" min-width="150">
      <template #default="scope">
        {{ scope.row.startDate + " " + scope.row.startTime }}
      </template>
    </el-table-column>
    <el-table-column label="结束时间" min-width="150">
      <template #default="scope">
        {{ scope.row.endDate + " " + scope.row.endTime }}
      </template>
    </el-table-column>
    <el-table-column
      prop="granularity"
      label="粒度(分钟)"
      width="120"
      align="center"
    >
      <template #default="scope">
        <el-text :type="scope.row.granularity == 30 ? 'info' : 'warning'"
          >{{ scope.row.granularity }}分钟</el-text
        >
      </template>
    </el-table-column>
    <el-table-column label="操作" width="100" align="center" fixed="right">
      <template #default="scope">
        <el-button type="danger" link @click="handleDelete(scope.$index)">
          <el-icon>
            <i-ep-delete />
          </el-icon>
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import usePlanningStore from "@/stores/planningStore";
const planningStore = usePlanningStore();
import dayjs from "dayjs";

const handleDelete = (index) => {
  planningStore.timeRanges.splice(index, 1);
  // regenerate time slots
  planningStore.timeSlots = [];
};
</script>
